<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <title>题目集详情</title>
    <div th:replace="~{fragments/head-base}"></div>
    <!--Page level styles-->
    <link type="text/css" rel="stylesheet" th:href="@{/css/timer.css}"/>
    <!--heard script-->

    <!--小游戏-->
    <style type="text/css">
        canvas {
            display: block;
            margin: 50px auto;
            box-shadow: -2px -2px 2px #EFEFEF, 5px 5px 5px #B9B9B9;
            cursor: pointer;
        }
        .btn-wrap {
            display: flex;
            flex-direction: row;
            justify-content: center;
        }
        .btn-wrap div {
            margin: 0 10px;
        }
        div>span {
            display: inline-block;
            padding: 10px 20px;
            color: #FFFFFF;
            background-color: #EE82EE;
            border-radius: 5px;
            cursor: pointer;
        }
        div.unable span {
            background: #D6D6D4;
            color: #ADACAA;
        }
        #result-wrap {
            text-align: center;
        }

        #chaoge {color: #4fb7fe}
        #chaoge:hover {color: #AF2018}

    </style>

    <!--小游戏-->

</head>

<!--Page head script-->

<!--end of Page head script-->
<body class="body sidebar-left-hidden fixedNav_position fixedMenu_left">
<div class="preloader" style=" position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100000;
  backface-visibility: hidden;
  background: #ffffff;">
    <div class="preloader_img" style="width: 200px;
  height: 200px;
  position: absolute;
  left: 48%;
  top: 48%;
  background-position: center;
z-index: 999999">
        <img th:src="@{/img/loader.gif}" style=" width: 50px;" alt="loading...">
    </div>
</div>
<div id="wrap">
    <div th:replace="~{fragments/top :: top}"></div>
    <!-- /#top -->
    <div class="wrapper fixedNav_top">
        <div th:replace="~{fragments/left :: left}"></div>
        <!-- /#left -->
        <div id="content" class="bg-container">
            <header class="head">
                <div class="main-bar">
                    <div class="row no-gutters">
                        <div class="col-12">
                            <h4 class="nav_top_align">
                                <i class="fa fa-trophy mr-1"></i>
                                [[${competition.name}]]
                            </h4>
                        </div>
                    </div>
                </div>
            </header>
            <div class="outer">
                <div class="inner bg-container">
                    <div id="competitionApp">
                    <div class="row mt-3">
                        <div class="col-8">
                            <div class="card">
                                <div>
                                    <ul class="nav nav-inline view_user_nav_padding">
                                        <li class="nav-item card_nav_hover">
                                            <a class="nav-link active" href="#tab1" id="home-tab" data-toggle="tab"
                                               aria-expanded="true">
                                                <i class="fa  fa-file-text-o"></i><span class="ml-2">题目列表</span>
                                            </a>
                                        </li>
                                        <li class="nav-item card_nav_hover">
                                            <a class="nav-link " href="#tab2" id="hats-tab" data-toggle="tab"
                                               aria-expanded="false">
                                                <i class="fa fa-code"></i><span class="ml-2">我的提交</span>
                                            </a>
                                        </li>
                                        <li class="nav-item card_nav_hover">
                                            <a class="nav-link " href="#tab3" onclick="clickPageRegister(1)" id="acProblemList" data-toggle="tab"
                                               aria-expanded="false">
                                                <i class="fa fa-bar-chart"></i><span class="ml-2">排名</span>
                                            </a>
                                        </li>
                                    </ul>
                                    <div id="clothing-nav-content" class="tab-content m-t-10">
                                        <!--tab1-->
                                        <div role="tabpanel" class="tab-pane fade active show" id="tab1"
                                             aria-expanded="false">
                                            <p/><A name="helpmeeeeeee"> </A>
                                            <p/>
                                            <p/>
                                            <p/>
                                            <h3>第一关</h3>
                                            <table class="table table-hover tables ">
                                                <thead class="">
                                                <tr>
                                                    <th class="text-center">题号</th>
                                                    <th class="">标题</th>
                                                    <th class="text-center">提交</th>
                                                    <th class="text-center">通过率</th>
                                                    <th class="text-center">分值</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr v-for="(competitionProblem,index) in competitionProblemList1">
                                                    <td class="text-center">
                                                        {{competitionProblem.problemId}}
                                                    </td>
                                                    <td class=""><a target="_blank" title="点击进入" :href="'problem/problemDetailPage?problemId='+competitionProblem.problemId+'&compId='+competitionProblem.compId"  class="text-primary"> {{competitionProblem.problemName}}</a></td>
                                                    <td class="text-center">{{competitionProblem.submitCount}}</td>
                                                    <td class="text-center">
                                                        <span v-if="competitionProblem.acCount != 0">
                                                            {{competitionProblem.acCount*1.0 / competitionProblem.submitCount*100 | formatNum}}%
                                                        </span>
                                                        <span v-if="competitionProblem.acCount == 0">
                                                            0.00%
                                                        </span>
                                                    </td>
                                                    <td class="text-center">{{competitionProblem.score}}</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                            <h3>第二关</h3>
                                            <table class="table table-hover tables ">
                                                <tbody>
                                                <tr v-for="(competitionProblem,index) in competitionProblemList2">
                                                    <td class="text-center">
                                                        {{competitionProblem.problemId}}
                                                    </td>
                                                    <!--<td class=""><a target="_blank"  :href="'problem/problemDetailPage?problemId='+competitionProblem.problemId+'&compId='+competitionProblem.compId"  class="text-primary"> {{competitionProblem.problemName}}</a></td>-->
                                                    <td class=""><a target="_blank" title="点击进入" :href="'problem/problemDetailPage?problemId='+competitionProblem.problemId+'&compId='+competitionProblem.compId" th:if="${MySocre >= s3 }" class="text-primary"> {{competitionProblem.problemName}}</a></td>
                                                    <td class=""><a href="javascript:void(0)" onclick="" id="chaoge" title="分数不够，请先通过第一关" th:if="${MySocre < s3 }"> {{competitionProblem.problemName}}</a></td>
                                                    <td class="text-center">{{competitionProblem.submitCount}}</td>
                                                    <td class="text-center">
                                                        <span v-if="competitionProblem.acCount != 0">
                                                            {{competitionProblem.acCount*1.0 / competitionProblem.submitCount*100 | formatNum}}%
                                                        </span>
                                                        <span v-if="competitionProblem.acCount == 0">
                                                            0.00%
                                                        </span>
                                                    </td>
                                                    <td class="text-center">{{competitionProblem.score}}</td>
                                                </tr>

                                                </tbody>
                                            </table>
                                            <h3>第三关</h3>
                                            <table class="table table-hover tables ">
                                                <tbody>
                                                <tr v-for="(competitionProblem,index) in competitionProblemList3">
                                                    <td class="text-center">
                                                        {{competitionProblem.problemId}}
                                                    </td>
                                                    <!--<td class=""><a target="_blank"  :href="'problem/problemDetailPage?problemId='+competitionProblem.problemId+'&compId='+competitionProblem.compId"  class="text-primary"> {{competitionProblem.problemName}}</a></td>-->
                                                    <td class=""><a target="_blank" title="点击进入" :href="'problem/problemDetailPage?problemId='+competitionProblem.problemId+'&compId='+competitionProblem.compId" th:if="${MySocre >= s6}" class="text-primary"> {{competitionProblem.problemName}}</a></td>
                                                    <td class=""><a href="javascript:void(0)" onclick="" id="chaoge" title="分数不够，请先通过第二关" th:if="${MySocre < s6 }"> {{competitionProblem.problemName}}</a></td>
                                                    <td class="text-center">{{competitionProblem.submitCount}}</td>
                                                    <td class="text-center">
                                                        <span v-if="competitionProblem.acCount != 0">
                                                            {{competitionProblem.acCount*1.0 / competitionProblem.submitCount*100 | formatNum}}%
                                                        </span>
                                                        <span v-if="competitionProblem.acCount == 0">
                                                            0.00%
                                                        </span>
                                                    </td>
                                                    <td class="text-center">{{competitionProblem.score}}</td>
                                                </tr>

                                                </tbody>
                                            </table>
                                        </div>
                                        <!--#tab1--->
                                        <!--tab2-->
                                        <div role="tabpanel" class="tab-pane fade " id="tab2"
                                             aria-expanded="true">
                                            <table class="table table-hover">
                                                <thead class="">
                                                <tr>
                                                    <th class="text-center">题号</th>
                                                    <th class="text-center">状态</th>
                                                    <th class="text-center">得分</th>
                                                    <th class="text-center">通过组数</th>
                                                    <th class="text-center">提交时间</th>
                                                    <th class="text-center">使用语言</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr v-for="(problemResult,index) in problemResultList">
                                                    <td class="text-center">{{problemResult.problemId}}</td>
                                                    <td class="text-center">
                                                        <span class="btn-sm "
                                                              v-if="problemResult.status == 0">

                                                            <span class="mr-1">编译中</span>
                                                            <i class="fa fa-spinner fa-pulse "></i>
                                                        </span>
                                                                <span class=" btn-sm text-white" style="background-color: #4BC0C0"
                                                                      v-if="problemResult.status == 1">
                                                            答案正确
                                                        </span>
                                                                <span class=" btn-sm text-white" style="background-color: #FFCD56"
                                                                      v-if="problemResult.status == 2">
                                                            编译错误
                                                        </span>
                                                                <span class=" btn-sm text-white" style="background-color: #ed92ff"
                                                                      v-if="problemResult.status == 3">
                                                            格式错误
                                                        </span>
                                                                <span class=" btn-sm text-white" style="background-color: #FF9F40"
                                                                      v-if="problemResult.status == 4">
                                                            运行错误
                                                        </span>
                                                                <span class=" btn-sm text-white" style="background-color: #62b8ff"
                                                                      v-if="problemResult.status == 5">
                                                            时间超限
                                                        </span>
                                                                <span class=" btn-sm text-white" style="background-color: #6574ff"
                                                                      v-if="problemResult.status == 6">
                                                            内存超限
                                                        </span>
                                                                <span class=" btn-sm  text-white" style="background-color:#FF6384 "
                                                                      v-if="problemResult.status == 7">
                                                            答案错误
                                                        </span>
                                                                <span class="btn-sm" v-if="problemResult.status == 8">
                                                                    <span>队列中</span><i class="ml-1 fa fa-spinner fa-pulse"></i>
                                                        </span>
                                                                <span class=" btn-sm"
                                                                      v-if="problemResult.status == 9">
                                                                <span>判题中</span>
                                                                <i class="ml-1 fa fa-spinner fa-pulse"></i>
                                                        </span>
                                                    </td>
                                                    <td class="text-center">{{problemResult.score}}</td>
                                                    <td class="text-center">{{problemResult.acCount}}</td>
                                                    <td class="text-center">{{problemResult.createTime | formatDate}}</td>
                                                    <td class="text-center">{{problemResult.type}}</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                            <!--page-->
                                            <div class="row mt-3 mb-3">
                                                <div style="margin: 0 auto">
                                                    <ul class="page" maxshowpageitem="5" pagelistcount="10"
                                                        id="page1"></ul>
                                                </div>
                                            </div>
                                            <!--#page-->

                                        </div>
                                        <!--#tab2-->
                                        <!--tab3-->
                                        <div role="tabpanel" class="tab-pane fade" id="tab3" aria-expanded="false">
                                            <table class="table table-hover ">
                                                <thead class="">
                                                <tr>
                                                    <th class="text-center">排名</th>
                                                    <th class="text-center">用户名</th>
                                                    <th class="text-center">学校</th>
                                                    <th class="text-center">总分</th>
                                                    <th class="text-center">完成题数</th>
                                                    <th class="text-center">提交</th>
                                                    <th class="text-center">AC率</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr v-for="(register,index) in registerList">
                                                    <td class="text-center">{{index + 1}}</td>
                                                    <td class="text-center"><a target="_blank" :href="'/user/mainPage?userId='+register.userId" class="text-primary">{{register.name}}</a></td>
                                                    <td class="text-center">{{register.school}}</td>
                                                    <td class="text-center">{{register.score}}</td>
                                                    <td class="text-center">{{register.solutionCount}}</td>
                                                    <td class="text-center">{{register.submitCount}}</td>
                                                    <td class="text-center">

                                                         <span v-if="register.acCount != 0">
                                                            {{register.acCount*1.0 / register.submitCount*100 | formatNum}}%
                                                        </span>
                                                        <span v-if="register.acCount == 0">
                                                           0.00%
                                                        </span>

                                                    </td>
                                                </tr>

                                                </tbody>
                                            </table>

                                            <!--page-->
                                            <div class="row mt-3 mb-3">
                                                <div style="margin: 0 auto">
                                                    <ul class="page" maxshowpageitem="5" pagelistcount="10"
                                                        id="page2"></ul>
                                                </div>
                                            </div>
                                            <!--#page-->
                                        </div>
                                        <!--#tab3-->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--right-->
                        <div class="col-4">
                            <div class="card ">
                                <div class="card-block">
                                    <div class="row">
                                        <div class="col-12">
                                            <i class="fa fa-clock-o text-primary fa-lg"></i>
                                            <span class="ml-1">剩余时间</span>
                                        </div>
                                        <div class="col-12 mt-3">
                                            <div th:if="${closeSecond > 0 }" class="time-item text-center"
                                                 style="border-radius: 10px;background-color: #eee">
                                                <span id="day_show">0</span>天
                                                <strong id="hour_show">0</strong>时
                                                <strong id="minute_show">00</strong>分
                                                <strong id="second_show">00</strong>秒
                                            </div>
                                            <div th:if="${closeSecond <= 0 }"
                                                 style="border-radius: 10px;background-color: #eee"
                                                 class="item-closed text-center ">已经结束!</div>
                                        </div>
                                    </div>
                                    <hr class="mt-3"/>
                                    <div class="row">
                                        <div class="col-12">
                                            <i class="fa fa-trophy text-warning fa-lg"></i>
                                            <span class="ml-1">题目集说明</span>
                                        </div>
                                        <div class="col-12 mt-3">[[${competition.title}]]</div>
                                    </div>
                                    <hr class="mt-3"/>
                                    <div class="row">
                                        <div class="col-12">
                                            <i class="fa fa-warning text-danger fa-lg"></i>
                                            <span class="ml-1">题目集模式</span>
                                        </div>
                                        <div class="col-12 mt-3">
                                            <a class="btn btn-sm btn-primary text-white">OI模式</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--#right-->
                        </div>


                    </div>
                    </div>
                </div>
            </div>
            <!-- /.inner -->
        </div>
        <!-- /.outer -->

        <!-- /#content -->
        <!-- Modal -->
        <div th:replace="~{fragments/modal}"></div>


        <!--#Modal-->

        <!--wrapper-->
        <!-- /#content -->
    </div>
    <!-- # right side -->
</div>
<p/>
<p/>
<p/>
<p/>
<p/>
<p/>
<p/>
<p/>
<p/>
<p/>
<p/>
<p/>
<!--小游戏-->
<div align="center" th:if="${MySocre == sum }">
    <p/>
    <p/>
    <p/>
    <p/>
    <p/>
    <p/>
    <p/>
    <p/>
    <p/>
    <p/>
    <h1 align="center" style="color: #50fefe">&nbsp;</h1>
    <h1 align="center" style="color: #50fefe">恭喜满分通关，您可以享受游戏时间了</h1>

    <h3 id="result-wrap" style="color: #50fefe">--益智五子棋--</h3>
    <canvas id="chess" width="450px" height="450px"></canvas>
    <div id="btn-wrap">
        <div id="restart" class="restart">
            <span>重新开始</span>
        </div>
        <div id="goback" class="goback unable">
            <span>悔棋</span>
        </div>
        <div id="return" class="return unable">
            <span>撤销悔棋</span>
        </div>
    </div>


</div>
<!--小游戏-->

<!-- /#wrap -->
<!-- global scripts-->
<div th:replace="~{fragments/footer :: footer}"></div>
<!--小游戏-->
<script type="text/javascript">
    var over = false;
    var me = true;	//我
    var _nowi = 0, _nowj = 0; //记录自己下棋的坐标
    var _compi = 0, _compj = 0; //记录计算机当前下棋的坐标
    var _myWin = [], _compWin = []; //记录我，计算机赢的情况
    var backAble = false, returnAble = false;
    var resultTxt = document.getElementById("result-wrap");
    var chressBord = []; //棋盘
    for (var i = 0; i < 15; i++) {
        chressBord[i] = [];
        for (var j = 0; j < 15; j++) {
            chressBord[i][j] = 0;
        }
    }
    //赢法的统计数组
    var myWin = [];
    var computerWin = [];
    //赢法数组
    var wins = [];
    for (var i = 0; i < 15; i++) {
        wins[i] = [];
        for (var j = 0; j < 15; j++) {
            wins[i][j] = [];
        }
    }
    var count = 0; //赢法总数
    //横线赢法
    for (var i = 0; i < 15; i++) {
        for (var j = 0; j <11; j++) {
            for (var k = 0; k < 5; k++) {
                wins[i][j+k][count] = true;
            }
            count++;
        }
    }
    //竖线赢法
    for (var i = 0; i < 15; i++) {
        for (var j = 0; j <11; j++) {
            for (var k = 0; k < 5; k++) {
                wins[j+k][i][count] = true;
            }
            count++;
        }
    }
    //正斜线赢法
    for (var i = 0; i < 11; i++) {
        for (var j = 0; j <11; j++) {
            for (var k = 0; k < 5; k++) {
                wins[i+k][j+k][count] = true;
            }
            count++;
        }
    }
    //反斜线赢法
    for (var i = 0; i < 11; i++) {
        for (var j = 14; j > 3; j--) {
            for (var k = 0; k < 5; k++) {
                wins[i+k][j-k][count] = true;
            }
            count++;
        }
    }
    // debugger;
    for (var i = 0; i < count; i++) {
        myWin[i] = 0;
        _myWin[i] = 0;
        computerWin[i] = 0;
        _compWin[i] = 0;
    }
    var chess = document.getElementById("chess");
    var context = chess.getContext('2d');
    context.strokeStyle = '#bfbfbf';	//边框颜色
    var backbtn = document.getElementById("goback");
    var returnbtn = document.getElementById("return");
    window.onload = function() {
        drawChessBoard(); // 画棋盘
    }
    document.getElementById("restart").onclick = function(){
        window.location.reload();
    }
    // 我，下棋
    chess.onclick = function(e){
        if(over){
            return;
        }
        if(!me){
            return;
        }
        // 悔棋功能可用
        backbtn.className = backbtn.className.replace(new
        RegExp("(\\s|^)unable(\\s|$)")," ");
        var x = e.offsetX;
        var y = e.offsetY;
        var i = Math.floor(x / 30);
        var j = Math.floor(y / 30);
        _nowi = i;
        _nowj = j;
        if(chressBord[i][j] == 0){
            oneStep(i,j,me);
            chressBord[i][j] = 1; //我，已占位置

            for (var k = 0; k < count; k++) { // 将可能赢的情况都加1
                if(wins[i][j][k]){
                    // debugger;
                    myWin[k]++;
                    _compWin[k] = computerWin[k];
                    computerWin[k] = 6; //这个位置对方不可能赢了
                    if(myWin[k] == 5){
                        // window.alert('你赢了');
                        resultTxt.innerHTML = '恭喜，你赢了！';
                        over = true;
                    }
                }
            }
            if(!over){
                me = !me;
                computerAI();
            }
        }
    }
    // 悔棋
    backbtn.onclick = function(e){
        if(!backAble) { return;}
        over = false;
        me = true;
        // resultTxt.innerHTML = 'o(╯□╰)o，悔棋中';
        // 撤销悔棋功能可用
        returnbtn.className = returnbtn.className.replace( new
        RegExp("(\\s|^)unable(\\s|$)")," ");
        // 我，悔
        chressBord[_nowi][_nowj] = 0; //我，已占位置 还原
        minusStep(_nowi, _nowj); //销毁棋子

        for (var k = 0; k < count; k++) { // 将可能赢的情况都减1
            if(wins[_nowi][_nowj][k]){
                myWin[k]--;
                computerWin[k] = _compWin[k]; //这个位置对方可能赢
            }
        }
        // 计算机相应的悔棋
        chressBord[_compi][_compj] = 0; //计算机，已占位置 还原
        minusStep(_compi, _compj);//销毁棋子

        for (var k = 0; k < count; k++) {// 将可能赢的情况都减1
            if(wins[_compi][_compj][k]){
                computerWin[k]--;
                myWin[k] = _myWin[i];//这个位置对方可能赢
            }
        }
        resultTxt.innerHTML = '--益智五子棋--';
        returnAble = true;
        backAble = false;
    }
    // 撤销悔棋
    returnbtn.onclick = function(e){
        if(!returnAble){ return;}
        // 我，撤销悔棋
        chressBord[_nowi][_nowj] = 1;//我，已占位置
        oneStep(_nowi,_nowj,me);
        for (var k = 0; k < count; k++) {
            if(wins[_nowi][_nowj][k]){
                myWin[k]++;
                _compWin[k] = computerWin[k];
                computerWin[k] = 6;//这个位置对方不可能赢
            }
            if(myWin[k] == 5){
                resultTxt.innerHTML = '恭喜，你赢了！';
                over = true;
            }
        }
        // 计算机撤销相应的悔棋
        chressBord[_compi][_compj] = 2;//计算机，已占位置
        oneStep(_compi,_compj,false);
        for (var k = 0; k < count; k++) {// 将可能赢的情况都减1
            if(wins[_compi][_compj][k]){
                computerWin[k]++;
                _myWin[k] = myWin[k];
                myWin[k] = 6;//这个位置对方不可能赢
            }
            if(computerWin[k] == 5){
                resultTxt.innerHTML = 'o(╯□╰)o，计算机赢了，继续加油哦！';
                over = true;
            }
        }
        returnbtn.className += '' + 'unable';
        returnAble = false;
        backAble = true;
    }

    // 计算机下棋
    var computerAI = function(){
        var myScore = [];
        var computerScore = [];
        var max = 0;
        var u =0, v = 0;
        for (var i = 0; i < 15; i++) {
            myScore[i] = [];
            computerScore[i] = [];
            for (var j = 0; j < 15; j++) {
                myScore[i][j] = 0;
                computerScore[i][j] = 0;
            }
        }
        for (var i = 0; i < 15; i++) {
            for (var j = 0; j < 15; j++) {
                if(chressBord[i][j] == 0){
                    for (var k = 0; k < count; k++) {
                        if(wins[i][j][k]){
                            if(myWin[k] == 1){
                                myScore[i][j] += 200;
                            }else if(myWin[k] == 2){
                                myScore[i][j] += 400;
                            }
                            else if(myWin[k] == 3){
                                myScore[i][j] += 2000;
                            }
                            else if(myWin[k] == 4){
                                myScore[i][j] += 10000;
                            }

                            if(computerWin[k] == 1){
                                computerScore[i][j] += 220;
                            }else if(computerWin[k] == 2){
                                computerScore[i][j] += 420;
                            }
                            else if(computerWin[k] == 3){
                                computerScore[i][j] += 2100;
                            }
                            else if(computerWin[k] == 4){
                                computerScore[i][j] += 20000;
                            }
                        }
                    }

                    if(myScore[i][j] > max){
                        max = myScore[i][j];
                        u = i;
                        v = j;
                    }else if(myScore[i][j] == max){
                        if(computerScore[i][j]>computerScore[u][v]){
                            u = i;
                            v = j;
                        }
                    }

                    if(computerScore[i][j] > max){
                        max = computerScore[i][j];
                        u = i;
                        v = j;
                    }else if(computerScore[i][j] == max){
                        if(myScore[i][j]>myScore[u][v]){
                            u = i;
                            v = j;
                        }
                    }
                }
            }
        }
        _compi = u;
        _compj = v;
        oneStep(u,v,false);chressBord[u][v] = 2; //计算机占据位置
        for (var k = 0; k < count; k++) {
            if(wins[u][v][k]){
                computerWin[k]++;
                _myWin[k] = myWin[k];
                myWin[k] = 6; //这个位置对方不可能赢了
                if(computerWin[k] == 5){
                    resultTxt.innerHTML = 'o(╯□╰)o，计算机赢了，继续加油哦！';
                    over = true;
                }
            }
        }
        if(!over){
            me = !me;
        }
        backAble = true;
        returnAble = false;
        var hasClass = new RegExp('unable').test('' +
            returnbtn.className + '');
        if(hasClass) {
            returnbtn.className += '' + 'unable';
        }
    }
    //绘画棋盘
    var drawChessBoard = function(){
        for (var i = 0; i < 15; i++) {
            context.moveTo(15 + i * 30 , 15);
            context.lineTo(15 + i * 30 , 435);
            context.stroke();
            context.moveTo(15 , 15 + i * 30);
            context.lineTo(435 , 15 + i * 30);
            context.stroke();
        }
    }
    //画棋子
    var oneStep = function(i,j,me) {
        context.beginPath();
        context.arc(15 +i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);// 画圆
        context.closePath();
        //渐变
        var gradient = context.createRadialGradient(15 + i * 30
            + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 -
            2, 0);
        if(me){
            gradient.addColorStop(0,'#0a0a0a');
            gradient.addColorStop(1,'#636766');
        }else{
            gradient.addColorStop(0,'#d1d1d1');
            gradient.addColorStop(1,'#f9f9f9')
        }
        context.fillStyle = gradient;
        context.fill();
    }
    //销毁棋子
    var minusStep = function(i,j){
        //擦除该圆
        context.clearRect((i) * 30, (j) * 30, 30, 30);
        // 重画该圆周围的格子
        context.beginPath();
        context.moveTo(15+i*30, j*30);
        context.lineTo(15+i*30, j*30 + 30);
        context.moveTo(i*30, j*30+15);
        context.lineTo((i+1)*30, j*30+15);

        context.stroke();
    }
</script>

<!--小游戏-->
<script type="text/javascript" th:src="@{/js/pages/timer.js}"></script>
<!--end of global scripts-->

<script th:inline="javascript" type="text/javascript">
    /*<![CDATA[*/

    var closeSecond = [[${closeSecond}]];
    var compId = [[${competition.id}]];

    timer(closeSecond);

    // vue
    var competitionApp = new Vue({
        el: '#competitionApp',
        data: {
            problemResultTotal:0,
            registerTotal: 0,
            problemResultList:[],
            competitionProblemList:[],
            competitionProblemList1:[],
            competitionProblemList2:[],
            competitionProblemList3:[],
            registerList:[]
        },
        filters: {
            formatDate: function (val) {
                var value = new Date(val);
                var year = value.getFullYear();
                var month = padDate(value.getMonth() + 1);
                var day = padDate(value.getDate());
                var hour = padDate(value.getHours());
                var minutes = padDate(value.getMinutes());
                var seconds = padDate(value.getSeconds());
                return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
            },formatNum: function (val) {
                //四舍五入
                return parseFloat(val).toFixed(2);
            }
        },
        methods: {
            listCompetitionProblem: function () {
                var url = 'competitionProblem/listVOByCompId';
                this.$http.post(url,{"compId":compId},{emulateJSON:true}).then(function (res) {
                    this.competitionProblemList = res.data.data;
                }), function (res) {
                    console.log(res.data.msg);
                }
            },
            listCompetitionProblem1: function () {
                var url = 'competitionProblem/listVOByCompId1';
                this.$http.post(url,{"compId":compId},{emulateJSON:true}).then(function (res) {
                    this.competitionProblemList1 = res.data.data;
                }), function (res) {
                    console.log(res.data.msg);
                }
            },
            listCompetitionProblem2: function () {
                var url = 'competitionProblem/listVOByCompId2';
                this.$http.post(url,{"compId":compId},{emulateJSON:true}).then(function (res) {
                    this.competitionProblemList2 = res.data.data;
                }), function (res) {
                    console.log(res.data.msg);
                }
            },
            listCompetitionProblem3: function () {
                var url = 'competitionProblem/listVOByCompId3';
                this.$http.post(url,{"compId":compId},{emulateJSON:true}).then(function (res) {
                    this.competitionProblemList3 = res.data.data;
                }), function (res) {
                    console.log(res.data.msg);
                }
            },
            listRegister: function (pageNum) {
                var url = 'register/listRegisterByCompId2Page';
                this.$http.post(url,{"compId":compId,"pageNum":pageNum},{emulateJSON:true}).then(function (res) {
                    this.registerTotal = res.data.data.total;
                    this.registerList = res.data.data.list;
                    $("#page2").initPage(this.registerTotal, pageNum, clickPageRegister);
                }), function (res) {
                    console.log(res.data.msg);
                }
            },listPageProblemResult: function (pageNum) {
                var url = 'problemResult/listProblemResultCompetitionVO2Page';
                this.$http.post(url,{"compId":compId,"pageNum":pageNum},{emulateJSON:true}).then(function (res) {
                    this.problemResultTotal = res.data.data.total;
                    this.problemResultList = res.data.data.list;
                    $("#page1").initPage(this.problemResultTotal, pageNum, clickPageProblemResult);
                }), function (res) {
                    console.log(res.data.msg);
                }
            }
        }
    });

    //初始化
    competitionApp.listRegister(1);
    competitionApp.listPageProblemResult(1);
    competitionApp.listCompetitionProblem();
    competitionApp.listCompetitionProblem1();
    competitionApp.listCompetitionProblem2();
    competitionApp.listCompetitionProblem3();
    //分页点击方法
    function clickPageRegister(pageNum) {
        competitionApp.listRegister(pageNum);
    }

    function clickPageProblemResult(pageNum) {
        competitionApp.listPageProblemResult(pageNum);
    }


    // end of vue








    /*]]>*/
</script>

</body>

</html>
